<template>
    <div class="main">
        <div class="main-head">
            <myhead></myhead>
        </div>
        <div class="main-content">
            <div class="main-left animate__animated animate__backInUp">
                <el-scrollbar>
                    <mymenu></mymenu>
                </el-scrollbar>
            </div>

            <div class="main-right">
                <div class="navBar">
                    <navbar></navbar>
                </div>
                <div class="main-page">
                    <el-scrollbar>
                        <router-view>
                        </router-view>
                    </el-scrollbar>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { closeloading } from '@/utils/loading';
import { onMounted } from 'vue';

 import  myhead from '@/components/layout/head.vue';
 import  mymenu from '@/components/layout/menu.vue';
 import  navbar from '@/components/layout/navbar.vue';


 onMounted(() => {
    closeloading();
})

</script>

<style scoped>
.main {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.main-head {
    height: 60px;
    margin: 4x;
    border-radius:4px ;
    background: #f7f7f8;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)

}

.main-content{
    display: flex;
    
}
.main-left {
height: calc(100vh - 61px);
border-right:1px solid #eee ;
margin: 4px;
border-radius:4px ;
box-shadow: 0 4px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)

}

.main-right{
    flex: 1;
}
.navBar {
    margin:4px ;
    width: calc(100vw - 238px);
    border-radius:8px ;
    background: rgba(0, 0, 0, 0.03);
    box-shadow: 0 4px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.main-page {
    height: calc(100vh - 61px - 61px);
    width: calc(100vw - 230px);
    background: #fcfafa;

}
</style>